<template>
  <div class="a-img">
    <el-image :src="config.serverImg + element.img" fit="scale-down" lazy />
    <div class="flex c1">
      <div @click="emit('delImg', 'imgs')">删除</div>
      <div @click="emit('selectImg', 'imgs')">更换</div>
    </div>
  </div>
</template>

<script setup>
import publicJS from "@/hook/public.js";
const { config, defaultImg } = publicJS();
const emit = defineEmits(["selectImg", "delImg"]); //自定义事件
const props = defineProps({
  element: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const formData = {
  img: defaultImg,
  show: true,
};

//暴露方法给父组件 通过ref.value调用
defineExpose({
  formData,
});
</script>

<style scoped lang="scss">
.a-img {
  position: relative;
  margin: 5px;
  cursor: pointer;
  width: 120px;
  height: 120px;

  .el-image {
    border: 1px solid #eee;
    width: 100%;
    height: 100%;
  }

  &:hover {
    .el-image {
      border-color: var(--el-color-primary);
    }
    .c1 {
      opacity: 1;
      background: var(--el-color-primary-light-2);
    }
  }
  .c1 {
    position: absolute;
    line-height: 25px;
    height: 25px;
    font-size: 14px;
    color: #fff;
    opacity: 0;
    transition: 0.3s;
    left: 0;
    bottom: 0;
    width: 100%;
    div {
      width: 50%;
      text-align: center;
    }
  }
}
</style>
